<template>
  <div class="address" :style="{'min-height':winHeight + 'px'}">
    <ul class="address_ul">
      <li v-for="item,idx in addressData" @click="statusHandle(idx)">
        <div class="address_check" :class="{address_check_border:item.status == 0}">
          <img :src="img02" alt="" v-show="item.status == 1">
        </div>
        <div class="address_text">
          <span>{{item.name}} {{item.tel}}</span>
          <p>{{item.province}} {{item.city}} {{item.area}} {{item.address}}</p>
        </div>
        <router-link :to="{name:'addaddress',query:{'oldlocation':item}}">
          <img class="bianji" :src="img03" alt="">
        </router-link>
      </li>
    </ul>
    <div class="addAddress">
      <router-link to="/addaddress">
        <img :src="img01" alt="">
        <span>添加地址</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
import img01 from '../common/images/add.png'
import img02 from '../common/images/icon_right.png'
import img03 from '../common/images/icon_share.png'
export default {
  data () {
    return {
      addressData: '',
      winHeight: '',
      img01,
      img02,
      img03
    }
  },
  methods: {
    getAllData () {
      var urls = 'listAddress/' + '/mid/' + 398
      axios.post('/api/' + urls).then(e => {
        console.log(e.data)
        this.addressData = e.data
      })
    },
    statusHandle (idx) {
      var urls = 'eidtAddress/' + '/mid/' + 398 + '/id/' + this.addressData[idx].id + '/name/' + this.addressData[idx].name + '/tel/' + this.addressData[idx].tel + '/province/' + this.addressData[idx].province + '/city/' + this.addressData[idx].city + '/area/' + this.addressData[idx].area + '/address/' + this.addressData[idx].address + '/status/' + 1
      axios.post('/api/' + urls).then(e => {
        this.addressData.forEach((e, idxs) => {
          if (idx == idxs) {
            e.status = 1
          } else {
            e.status = 0
          }
        })
      })
    }
  },
  created () {
    this.winHeight = $(window).height()
    this.getAllData()
  }
}
</script>

<style>
.address{
  z-index: 50 !important;
}
.addAddress{
  width: 2rem;
  height: 0.6rem;
  padding: 0.15rem 2.75rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
}
.addAddress img{
  width: 0.6rem;
  height: 0.6rem;
  display: block;
}
.addAddress span{
  font-size: 0.32rem;
  color: #666666;
}
.address_ul{
  width: 7.5rem;
  /* padding: 0 0.3rem; */
  margin-top: 0.3rem;
  background-color: #ffffff;
}
.address_ul li{
  width: 6.9rem;
  height: 0.8rem;
  padding: 0.2rem 0.3rem;
  border-bottom: 1px solid #e2e2e2;
  display: flex;
  align-items: center;
}
.address_ul li:last-of-type{
  border-bottom: none;
}
.address_check_border{
  border: 1px solid #e2e2e2;
  box-sizing: border-box;
}
.address_check{
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
}
.address_check img{
  width: 0.3rem;
  display: block;
}
.address_text{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 0.5rem;
  flex: 1;
}
.address_text span{
  font-size: 0.24rem;
  color: #222222;
}
.address_text p{
  font-size: 0.16rem;
  color: #666666;
}
.bianji{
  display: block;
  width: 0.6rem;
}
.addAddress a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
